import React, { useState, useEffect } from 'react';
import { Form, Descriptions, Table, Button, Space } from 'antd';
import { connect } from 'umi';
import styles from './index.less';
const { Item } = Descriptions;

var apiPop = props => {
  // 请求参数标题
  const columns = [
    { title: '参数名', dataIndex: '1' },
    { title: '绑定字段', dataIndex: '2' },
    { title: '参数类型', dataIndex: '3' },
    { title: '操作符', dataIndex: '4' },
    { title: '示例', dataIndex: '5' },
    { title: '描述', dataIndex: '6' },
    { title: '是否必填', dataIndex: '7' },
  ];
  // 返回参数标题
  const results = [
    { title: '参数名', dataIndex: '1' },
    { title: '绑定字段', dataIndex: '2' },
    { title: '参数类型', dataIndex: '3' },
    { title: '序列', dataIndex: '4' },
    { title: '示例', dataIndex: '5' },
    { title: '描述', dataIndex: '6' },
  ]
  const { apiPop, serveUnitName } = props.MyRole;
  // 请求参数
  let conditionList = [];
  let resultList = [];
  if (apiPop.length !== 0) {
    conditionList = apiPop.conditionList;
    resultList = apiPop.resultList
  }
  // 返回参数列表
  const renderResultDatat = (item, i) => {
    return {
      key: i,
      1: item.paramName,
      2: item.columnName,
      3: item.columnType,
      4: item.index,
      5: item.example,
      6: item.description,
    };
  }
  // 请求参数列表
  const renderDatatData = (item, i) => {
    return {
      key: i,
      1: item.paramName,
      2: item.columnName,
      3: item.columnType,
      4: item.operator,
      5: item.example,
      6: item.description,
      7: item.isMust===true?"是":"否",
    };
  };
  const [apiGroup, setApiGroup] = React.useState("")
  // 协议枚举
  const [protocol, setNrotocol] =React.useState({
    1:"HTTPS",
    2:"HTTP"
  })
  // 请求方式
  const [requestMethod, setRequestMethod] =React.useState({
    1:"GET",
    2:"POST",
    3:"PUT",
    4:"DELETE"
  })
  useEffect(() => {
    selBatchGroup(apiPop.groupId)
  });

  // api分组名称
  const selBatchGroup = async (id) => {
    let arr = [id];
    let rs = await props.dispatch({
      type: "MyRole/selBatchGroup",
      payload: arr
    })
    // 更新state中的值
    if(rs.success){
      setApiGroup(rs.data[0]?.name);
    }
    
  }


  return (
    <div className={styles.applyPop}>
      <div>
        <Descriptions 
        contentStyle={{color: "rgba(0, 0, 0, 0.65)",}} column={2} className={styles.title}>
          <Item label="API创建方式">向导模式</Item>
          <Item label="API名称">{apiPop.name}</Item>
          <Item label="服务单元名称">{serveUnitName}</Item>
          <Item label="协议">{protocol[apiPop.protocol]}</Item>
          <Item label="API分组名称">{apiGroup}</Item>
          <Item label="API ID">{apiPop.id}</Item>
          <Item label="请求方式">{requestMethod[apiPop.requestMethod]}</Item>
          <Item label="描述">{apiPop.description}</Item>
        </Descriptions>
      </div>
      <div className={styles.apiParameter}>
        <div className={styles.parameter}>请求参数</div>
        <div className={styles.TableList}>
          <Table
            columns={columns}
            pagination={false}
            scroll={{ y: '180px' }}
            dataSource={conditionList.map((item, i) => renderDatatData(item, i))}
          />
        </div>
      </div>
      <div className={styles.apiParameter}>
        <div className={styles.parameter}>返回参数</div>
        <div className={styles.TableList}>
          <Table
            size
            columns={results}
            pagination={false}
            scroll={{ y: '180px' }}
            dataSource={resultList.map((item, i) => renderResultDatat(item, i))}
          />
        </div>
      </div>
    </div>
  );
};
export default connect(({ MyRole }) => ({ MyRole }))(apiPop);
